:root{
    --accent:#d92b2b;
    --card-radius:26px;
    --card-height:320px;
    --wrap-width:1100px;
	--red: #d21415;
    --dot-size: 12px;
    --side-thickness: 2px;
	--red-1: #e42b2b;
      --red-2: #840b0b;

	  /* global layout vars (tune these) */
	  --size: 140px;     /* diamond width/height */
	  --gap: 64px;       /* horizontal gap between diamonds */
	  --shiftY: 40px;    /* how much the bottom row moves up (overlap) */
  }
  *{box-sizing:border-box}


  /* === WRAPPER === */
  .cc-wrap{
    width:100%;
    max-width:var(--wrap-width);
  }

  /* Heading + underline */
  .cc-heading{ margin-bottom:28px; }
  .cc-heading h2{ font-size:36px; margin:0 0 12px; font-weight:700; }
  .cc-heading .cc-lines{ display:flex; gap:16px; align-items:center; }
  .cc-lines .cc-line-small{ width:120px; height:3px; background:var(--accent); border-radius:3px; }
  .cc-lines .cc-line-long{ flex:1; height:1px; background:#e9e9e9; }

  /* === BASIC LAYOUT === */
  .cc-carousel{
    position:relative;
    height:400px;
    perspective:1200px;
    overflow:visible;
  }

  /* hide radio inputs */
  .cc-carousel input[type="radio"]{ display:none; }

  /* slides container (holds each slide absolutely) */
  .cc-slides{
    position:relative;
    height:100%;
  }

  .cc-slide{
    position:absolute;
    top:0;
    left:54%;
    width:calc(95% - 60px);
    height:100%;
    transform-origin:center center;
    transition: transform 520ms cubic-bezier(.2,.9,.2,1), opacity 380ms ease, box-shadow 300ms ease;
    transform: translateX(-50%) scale(.86) translateZ(-60px);
    opacity:0.18;
    pointer-events:none;
    z-index:0;
  }

  /* Style of the card itself */
  .cc-card{
    display:flex;
    align-items:stretch;
    height:100%;
    border-radius:var(--card-radius);
    background: linear-gradient(180deg,#fff 0%, #fff6f6 100%);
    box-shadow: 0 12px 30px rgba(18,18,18,0.12), 0 4px 8px rgba(18,18,18,0.06);
    overflow:hidden;
  }

  .cc-left{
    width:260px; min-width:260px; padding:20px; display:flex; align-items:center; justify-content:center;
  }
  .cc-imgwrap{
    width:auto; height:100%; border-radius:18px; overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,0.08); background:#fff;
  }
  .cc-imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }

  .cc-right{ flex:1; padding:28px 35px; display:flex; flex-direction:column;}
  .cc-title{ font-size:33px; font-weight:400; margin:0 0 14px; text-transform: unset; line-height: normal !important;}
  .cc-bullets{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:25px; font-size:21px; color:#333; }
  .cc-bullets li{ position:relative; padding-left:25px;font-family: Noto Sans; }
  .cc-bullets li::before{ content:""; width:8px; height:8px; background:var(--accent); border-radius:50%; position:absolute; left:0; top:7px; }

  /* === POSITIONS (controlled by checked radio buttons) ===
     We use selectors:
       #cc-s1:checked ~ .cc-slides .cc-slide[data-i="0"]  => active
       #cc-s2:checked ... data-i="1" => active etc.
     For simplicity, we show three visual positions: prev (left), active (center), next (right).
  */
  /* default: first slide active */
  .cc-slide[data-i="0"]{ transform: translateX(-50%) scale(1) translateZ(0); opacity:1; z-index:5; pointer-events:auto; }
  .cc-slide[data-i="1"]{ transform: translateX(calc(-58% + 260px)) scale(.84) translateZ(-120px) rotateY(-8deg); z-index:3; opacity:0.9; }
  .cc-slide[data-i="2"]{ transform: translateX(calc(-42% - 260px)) scale(.84) translateZ(-120px) rotateY(8deg); z-index:2; opacity:0.9; }
  .cc-slide[data-i="3"]{ transform: translateX(calc(-50% + 520px)) scale(.78) translateZ(-220px) rotateY(-12deg); z-index:1; opacity:0.15; }
  .cc-slide[data-i="4"]{ transform: translateX(calc(-50% - 520px)) scale(.78) translateZ(-220px) rotateY(12deg); z-index:1; opacity:0.12; }

  /* When slide 2 is checked — shift indexes so visual center is that slide */
  #cc-s2:checked ~ .cc-slides .cc-slide[data-id="1"]{ transform: translateX(-50%) scale(1) translateZ(0); opacity:1; z-index:5; pointer-events:auto; }
  #cc-s2:checked ~ .cc-slides .cc-slide[data-id="2"]{ transform: translateX(calc(-50% + 260px)) scale(.84) translateZ(-120px) rotateY(-8deg); z-index:3; opacity:0.9; }
  #cc-s2:checked ~ .cc-slides .cc-slide[data-id="0"]{ transform: translateX(calc(-50% - 260px)) scale(.84) translateZ(-120px) rotateY(8deg); z-index:2; opacity:0.9; }

  /* When slide 3 is checked */
  #cc-s3:checked ~ .cc-slides .cc-slide[data-id="2"]{ transform: translateX(-50%) scale(1) translateZ(0); opacity:1; z-index:5; pointer-events:auto; }
  #cc-s3:checked ~ .cc-slides .cc-slide[data-id="3"]{ transform: translateX(calc(-50% + 260px)) scale(.84) translateZ(-120px) rotateY(-8deg); z-index:3; opacity:0.9; }
  #cc-s3:checked ~ .cc-slides .cc-slide[data-id="1"]{ transform: translateX(calc(-50% - 260px)) scale(.84) translateZ(-120px) rotateY(8deg); z-index:2; opacity:0.9; }

  /* When slide 4 is checked */
  #cc-s4:checked ~ .cc-slides .cc-slide[data-id="3"]{ transform: translateX(-50%) scale(1) translateZ(0); opacity:1; z-index:5; pointer-events:auto; }
  #cc-s4:checked ~ .cc-slides .cc-slide[data-id="4"]{ transform: translateX(calc(-50% + 260px)) scale(.84) translateZ(-120px) rotateY(-8deg); z-index:3; opacity:0.9; }
  #cc-s4:checked ~ .cc-slides .cc-slide[data-id="2"]{ transform: translateX(calc(-50% - 260px)) scale(.84) translateZ(-120px) rotateY(8deg); z-index:2; opacity:0.9; }

  /* When slide 5 is checked (wrap to first visually) */
  #cc-s5:checked ~ .cc-slides .cc-slide[data-id="4"]{ transform: translateX(-50%) scale(1) translateZ(0); opacity:1; z-index:5; pointer-events:auto; }
  #cc-s5:checked ~ .cc-slides .cc-slide[data-id="0"]{ transform: translateX(calc(-50% + 260px)) scale(.84) translateZ(-120px) rotateY(-8deg); z-index:3; opacity:0.9; }
  #cc-s5:checked ~ .cc-slides .cc-slide[data-id="3"]{ transform: translateX(calc(-50% - 260px)) scale(.84) translateZ(-120px) rotateY(8deg); z-index:2; opacity:0.9; }

  /* nav dots (labels linked to radios) */
  .cc-dots{
    position:absolute;
    left:50%;
    transform:translateX(0%);
    bottom:-36px;
    display:flex;
    gap:12px;
    align-items:center;
  }
  .cc-dots label{
    width:12px; height:12px; border-radius:999px; background:#ddd; display:inline-block; cursor:pointer;
    transition: transform 200ms ease, background 200ms ease;
  }
  /* highlight the active dot using :checked + selector chain */
  #cc-s1:checked ~ .cc-dots label[for="cc-s1"],
  #cc-s2:checked ~ .cc-dots label[for="cc-s2"],
  #cc-s3:checked ~ .cc-dots label[for="cc-s3"],
  #cc-s4:checked ~ .cc-dots label[for="cc-s4"],
  #cc-s5:checked ~ .cc-dots label[for="cc-s5"]{
    background:var(--accent); transform:scale(1.2);
  }

  /* Prev/Next controls as labels (no JS) */
  .cc-nav{
    position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:999px;
    background:white; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(0,0,0,0.08);
    cursor:pointer; border:1px solid rgba(0,0,0,0.06);
  }
  .cc-nav.cc-left{ left:-22px; }
  .cc-nav.cc-right{ right:-22px; }
  .cc-nav svg{ width:18px; height:18px; stroke:#333; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}

  /* responsiveness */
  @media (max-width:920px){
    :root{ --card-height:360px; }
    .cc-left{ width:220px; min-width:220px; }
    .cc-imgwrap{ width:170px; height:200px; }
  }
  @media (max-width:640px){
    .cc-title{ font-size:20px; }
    .cc-card{ flex-direction:column; }
    .cc-left{ width:100%; min-width:unset; padding:12px; }
    .cc-imgwrap{ width:100%; height:180px; border-radius:14px; }
    .cc-right{ padding:12px; }
    /* simpler layout on mobile: all slides stacked center with less transform */
    .cc-slide{ left:50%; transform:translateX(-50%) scale(.98) translateZ(-10px) !important; opacity:0.98 !important; }
    .cc-slide[data-i="0"], .cc-slide[data-i="1"], .cc-slide[data-i="2"], .cc-slide[data-i="3"], .cc-slide[data-i="4"]{ transform:translateX(-50%) scale(.98) !important; opacity:0.98 !important; z-index:1; }
    .cc-nav.cc-left{ left:8px; } .cc-nav.cc-right{ right:8px; }
  }
  
  /***** customer success *****/
  /* ---- prefixed custom styles to avoid bootstrap conflicts ---- */
    .ts-section { padding: 48px 12px; }
    .ts-heading {
      font-weight: 700;
      font-size: 34px;
      display:flex;
      align-items:center;
      gap:1rem;
    }
    .ts-underline {
      height:3px;
      width:160px;
      background:#d72c2c;
      margin-top:8px;
      border-radius:2px;
    }

    /* marquee container */
    .ts-marquee {
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    /* track that moves horizontally; duplicated content inside for continuous loop */
    .ts-track {
      display: flex;
      gap: 24px;
      align-items: stretch;
      /* make enough width so animation can move */
    }

    /* testimonial card */
    .ts-card {
      min-width: 280px;      /* width of each card */
      max-width: 360px;
      background: #f6eaea;   /* pale pink default */
      border-radius: 14px;
      padding: 26px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      border: 1px solid rgba(0,0,0,0.04);
    }
    /* alternate card background (light gray) */
    .ts-card.alt { background: #f1f1f1; }

    .ts-quote {
      font-size: 28px;
      color: #e33a3a;
      font-weight:700;
      line-height: 0.7;
      margin-bottom: 8px;
    }
    .ts-text {
      font-size: 16px;
      line-height:1.6;
      color:#222;
      margin-bottom: 18px;
    }
    .ts-name {
      font-weight: 700;
      letter-spacing: 0.4px;
      color: #333;
      text-transform: uppercase;
      font-size: 14px;
    }

    /* two marquee animations: one left-to-right, one right-to-left */
    @keyframes ts-slide-left {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); } /* shift half of duplicated contents */
    }
    @keyframes ts-slide-right {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    /* For continuous effect we duplicate track content inside .ts-track-wrap */
    .ts-track-wrap {
      display:flex;
      width:200%;
	  gap: 24px;
    }

    /* apply durations and direction */
    .ts-row--left .ts-track-wrap { 
      animation: ts-slide-left 24s linear infinite;
    }
    .ts-row--right .ts-track-wrap {
      animation: ts-slide-right 24s linear infinite;
    }

    /* pause on hover */
    .ts-marquee:hover .ts-track-wrap { animation-play-state: paused; }

    /* Responsive: show more or fewer cards by keeping card width but letting container wrap */
    @media (max-width: 991px) {
      .ts-card { min-width: 240px; max-width: 320px; }
    }
    @media (max-width: 576px) {
      .ts-card { min-width: 220px; max-width: 260px; padding:18px; }
      .ts-heading { font-size: 26px; }
    }

    /* small helper for spacing between rows */
    .ts-rows-gap { margin-top: 22px; }
	
	
	/******* scrolling dots ******/

/* replaced section with svc-section (div) */
  .svc-section {
    border: none;
    position: relative;
    background: #fff;
    padding: 0;
    box-sizing: border-box;
  }

  /* renamed side lines to svc-side-left / svc-side-right */
  .svc-side-left,
  .svc-side-right {
    position: absolute;
    top: -40px;       /* reach up to the top-line */
    bottom: 0;
    width: 0;
    pointer-events: none;
    z-index: 2;
	height: 140%;
  }
  .svc-side-left  { left: calc(-1 * var(--side-thickness)); border-left: var(--side-thickness) dashed black; }
  .svc-side-right { right: calc(-1 * var(--side-thickness)); border-right: var(--side-thickness) dashed black; }

  /* top-line renamed to svc-top-line */
  .svc-top-line {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 18px;
    border-top: 2px dashed var(--red);
    overflow: visible;
  }

  /* red-dot renamed to svc-red-dot and supports data-dir attribute */
  .svc-red-dot {
    position: absolute;
    left: 0;
    width: var(--dot-size);
    height: var(--dot-size);
    background: var(--red);
    border-radius: 50%;
    border: 2px solid var(--red);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    will-change: transform;
    top: calc(1px - (var(--dot-size) / 2));
    transform: translateX(0);
    z-index: 3; /* ensure the dot stays above everything */
  }

  /* headings / text (unchanged names safe) */
  .svc-section h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.6rem;
  }
  .svc-section .h2 b { color: var(--red); }

  .svc-section p {
    margin: 6px 0;
    line-height: 1.45;
    font-size: 1rem;
  }

  .svc-section a { color: black; text-decoration: underline; }
  .svc-section a:hover { color: var(--red); }

  /* content card renamed to svc-card */
  .svc-card { padding: 20px; }

  /* bottom dashed border for only svc-section-3 (previous section3) */
  .svc-section.svc-section-3 {
    position: relative;
    padding-bottom: 28px; /* leave room for bottom-line */
  }
  .svc-section.svc-section-3 .svc-bottom-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    border-bottom: 2px dashed var(--red);
    z-index: 1; /* below verticals */
    pointer-events: none;
    overflow: visible;
  }

  @media (max-width: 520px) {
    .svc-container { padding: 0 12px; }
    body { padding: 20px; }
    .svc-top-line { height: 16px; }
    .svc-section { padding: 14px 18px; min-height: 140px; }
    .svc-side-left, .svc-side-right { top: 8px; bottom: 8px; }
  }
  /* Heading */
    .od-hero{
      text-align:center;
      padding:40px 16px 10px;
    }
    .od-hero h2{
      font-size:28px;
      font-weight:700;
      max-width:1100px;
      margin:0 auto 28px;
      line-height:1.3;
    }
    .od-highlight{color:var(--red-1);}

    /* Diamond container */
    .od-diamonds{
      margin:10px auto 0px;
      padding:20px;
    }

    .od-row{
      display:flex;
      gap:20px;
      /*justify-content:center;*/
      flex-wrap:wrap;
      /*align-items:center;*/
      margin-left: 11%;
    }

    /* Diamond box */
    .od-diamond{
      width:var(--size);
      height:var(--size);
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      transform: rotate(45deg);
      background: linear-gradient(135deg,var(--red-1),var(--red-2));
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
      position:relative;
      flex: 0 0 auto;
    }
    .od-diamond::after{
      content:'';
      position:absolute;
      inset:0;
      border-radius:14px;
      box-shadow: inset -20px -20px 50px rgba(0,0,0,0.15);
      mix-blend-mode: multiply;
    }
    .od-label{
      transform:rotate(-45deg);
      color:#fff;
      font-size:26px;
      font-weight:300;
      text-align:center;
      width:100%;
      padding:6px;
      line-height:1.05;
      word-break: break-word;
    }

    /* BOTTOM ROW: centered + staggered */
    .od-bottom{
      /* move up and shift half a gap to sit between top diamonds */
      transform: translateY(calc(-1 * var(--shiftY))) translateX(calc(var(--gap) / 2));
      /*justify-content:center;*/
      margin-left:200px;
    }

    /* add a small top margin on bottom diamonds to emphasize stagger */
    .od-bottom .od-diamond{
      margin-top:calc(var(--size) * 0.14);
    }

    /* If you had previous nth-child offsets, ensure they're reset */
    .od-bottom .od-diamond:nth-child(n){
      left:auto;
      margin-left:0;
      margin-right:0;
    }

    /* ---------------- Responsive breakpoints ---------------- */

    /* Large screens (default) already set via :root */

    /* Medium screens */
    @media (max-width:1100px){
      :root{
        --size: 120px;
        --gap: 44px;
        --shiftY: 36px;
      }

      .od-hero h2{ font-size:22px; }
    }

    /* Small / Tablet */
    @media (max-width:800px){
      :root{
        --size: 110px;
        --gap: 28px;
        --shiftY: 28px;
      }

      .od-hero h2{ font-size:20px; }
      .od-bottom{
        transform: translateY(calc(-1 * var(--shiftY))) translateX(calc(var(--gap) / 2));
      }
    }

    /* Narrow phones — remove horizontal shift so rows stack nicely */
    @media (max-width:520px){
      :root{
        --size: 120px;
        --gap: 18px;
        --shiftY: 18px;
      }
      .od-row {    justify-content: space-around;}
      .od-hero h2{ font-size:18px; }
      /* Remove horizontal shift on very small screens to avoid overflow */
      .od-bottom{
        transform: translateY(calc(-1 * var(--shiftY))) translateX(0);  margin-left: 0px;
      }
      .od-bottom .od-diamond{
        margin-top: calc(var(--size) * 0.08);
      }
    }

    /* Very narrow / stacked layout fallback */
    @media (max-width:360px){
      :root{
        --size: 78px;
        --gap: 12px;
        --shiftY: 12px;
      }
      .od-hero{ padding:28px 10px 8px; }
      .od-hero h2{ font-size:16px; }
    }